import { View, Text, Image } from '@tarojs/components'
import Taro, { useDidShow, useLoad } from '@tarojs/taro';
import { useState } from 'react';
import axios from '@/request/index'
import { useRichStore } from '@/store/rich';
import './index.scss'

export default function News() {

  const [list, setList]= useState<any[]>([])
  const { setRichContent } = useRichStore()
  useLoad(() => {
    console.log('Page loaded.')
  })

  const initList = async () => {
    const res = await axios.get('/catalog/moreVaccine', {
      params: {
      }
    })
    if (res && res.data) {
      setList(res.data)
    }
  }

  useDidShow(() => {
    initList()
  });

  const onClickItem = async (item: any) => {
    const res = await axios.get('/catalog/getContentByCatalogId', {
      params: {
        id: item.id
      }
    })
    if (res && res.data) {
      setRichContent(res.data.content);
      Taro.navigateTo({
        url: '/package-home/pages/RichTextView/index'
      })
    }
    // Taro.navigateTo({
    //   url:`/package-home/pages/HomeVacuumDetail/index?url=${item.url}`
    // })
  }


  return (
    <View className='news bg-[#F5F5F5] min-h-screen pb-[80px]'>
      <View className='px-4'>
        {
          list.map((item, index) => {
            return (
              <View key={index} className='mt-[50px] flex flex-col bg-[rgba(229,229,229,0.5)] rounded-lg overflow-hidden'>
                <Image src={item.typeImg} className='h-[280px] w-full' />
                <View className=' bg-[#FFF] flex flex-row flex-wrap gap-5 px-2 py-3'>
                  {
                    item.catalogs.map((sub) => {
                      return (
                        <View key={sub.id} onClick={() => onClickItem(sub)} className='flex flex-row items-center w-fit'>
                          <View className='w-[10px] h-[10px] bg-[#146780] rounded-[50%] overflow-hidden mr-[20px]' />
                          <Text className='text-[32px] text-[#146780]'>{sub.name}</Text>
                        </View>
                      )
                    })
                  }
                </View>
              </View>

            )
          })
        }
      </View>
    </View>
  )
}
